<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html {
    overflow: hidden;
  }

  body {
    background-color: #000;
  }

  .ring {
    width: 100vw;
    height: 100vh;
    transform-style: preserve-3d;
    perspective: 2000px;
  }

  .ring img {
    position: absolute;
    width: 300px;
    height: 400px;
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -200px;
    backface-visibility: hidden;
    opacity: 0.5;
    transition: all .5s;
  }

  .ring img:hover {
    opacity: 1;
  }
</style>

<body>
  <div class="ring">
    <img src="./image/nature-1.jpg" alt="Avatar" />
    <img src="./image/nature-2.jpg" alt="Avatar" />
    <img src="./image/nature-3.jpg" alt="Avatar" />
    <img src="./image/nature-4.jpg" alt="Avatar" />
    <img src="./image/nature-5.jpg" alt="Avatar" />
    <img src="./image/nature-6.jpg" alt="Avatar" />
    <img src="./image/nature-1.jpg" alt="Avatar" />
    <img src="./image/nature-2.jpg" alt="Avatar" />
    <img src="./image/nature-3.jpg" alt="Avatar" />
    <img src="./image/nature-4.jpg" alt="Avatar" />
    <img src="./image/nature-5.jpg" alt="Avatar" />
    <img src="./image/nature-6.jpg" alt="Avatar" />
  </div>
</body>
<script>
  function onLoad() {
    const imgs = document.querySelectorAll('.ring img');
    for (let i = 0; i < imgs.length; i++) {
      // 定义一个变量r，用来设置图片的距离
      const r = 700;
      // 定义一个变量deg，用来设置图片的角度
      const deg = 360 / imgs.length * i;
      // 定义一个变量d，用来计算图片的角度的弧度
      const d = deg * Math.PI / 180;
      // 计算图片的x轴坐标
      const x = r * Math.sin(d);
      // 计算图片的z轴坐标
      const z = r * Math.cos(d);
      // 设置图片的transform属性
      imgs[i].style.transform = `translate3d(${x}px, 0, ${z}px) rotateY(${180 + deg}deg)`;
    }

  }
  onLoad()
</script>

</html>